
<html lang="zh-CN">
<head>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8">
    <style>
        #systemAddressBookManage{

        }
        .el-checkbox__input>.el-checkbox__inner {
            display:none;
        }
        .is-leaf + .el-checkbox .el-checkbox__inner {
            display:inline-block;
        }
        .el-dialog__body{
            height: 100%;
            overflow: auto;
        }
        @media (max-width: 1366px) {
            #personalAddressBookManage .table-wrap {
                height: 500px !important;;
                overflow: auto;
            }
        }
    </style>
</head>
<body>
<div id="personalAddressBookManage" class="center_div" style="display:none;">
    <div class="searchForm" style="margin-top: 1%;margin-left: 1%">
        <template >
            联系人：
            <el-input v-model="conName" size="mini" style="width: 10%"></el-input>
        </template>
        <el-button type="primary" size="mini" @click="query(1)">查询</el-button>
        <el-button type="primary" size="mini" @click="add">添加</el-button>
    </div>
    <div class="table-wrap" style="margin-left: 1%">
        <el-table
                :data="tableData"
                style="width:100%;text-align: center"
                header-cell-style="font-size:15px;text-align:center;color:#515A6E;padding:10px 0px 10px 0px !important;background:#F5F5F6;border:1px solid #EBEBEB"
                cell-style="font-size:13px;text-align:center;color:#606266;padding:5px 0px 5px 0px !important;border:1px solid #EBEBEB;border-top:none">
            <el-table-column v-for="title in tableTitle" :prop="title.prop" :label="title.label">
            </el-table-column>
            <template v-if="buttons && buttons.length!==0">
                <el-table-column
                        class="align-right"
                        width="230px"
                        label="操作">
                    <template slot-scope="scope">
                        <el-button v-for="button in buttons"
                                   @click="operate(scope.row,button.href)" :type="button.type" class="el-button el-button--text el-button--medium">{{button.label}}
                        </el-button>
                    </template>
                </el-table-column>
            </template>
        </el-table>
        <el-pagination
                layout="prev, pager, next"
                @current-change="changePageNum"
                :current-page="pageNum"
                :total="total">
        </el-pagination>
    </div>
    <div>
        <el-dialog  v-if="loadTree" :title="title" :visible.sync="showBox" @close="manageDialogClose" append-to-body>
            <div>
                <div style="float:left;width:60%;height:300px">
                    <div style="height:99%;width:99%;margin-top:1%;background:white;overflow:auto">
                        <el-tree check-strictly
                                 :load="loadFleetAll"
                                 show-checkbox
                                 highlight-current
                                 lazy
                                 node-key="id"
                                 :props="defaultProps"
                                 :filter-node-method="filterNode"
                                 ref="tree"
                                 @check-change="handleCheckChange">
                            <span class="custom-tree-node" style="font-size: 14px" slot-scope="{ node, data }">
                                <span v-if="data.type===0"><img src="images/mapicon/tree_fleet.png" style="height: 15px;width: 15px;margin-right: 10px;vertical-align: middle">{{ node.label }}</span>
                                <span v-if="data.type===1"><img src="images/mapicon/tree_fleet.png" style="height: 15px;width: 15px;margin-right: 10px;vertical-align: middle">{{ node.label }}</span>
                                <span v-if="data.type===2"><img src="images/mapicon/tree_group.png" style="height: 15px;width: 15px;margin-right: 10px;vertical-align: middle">{{ node.label }}</span>
                                <span v-if="data.type===3"><img src="images/mapicon/tree_sub.png" style="height: 15px;width: 15px;margin-right: 10px;vertical-align: middle">{{ node.label }}</span>
                            </span>
                        </el-tree>
                    </div>
                </div>
                <div style="float:right;width:40%;height:300px;background: ghostwhite;overflow: auto">
                    <el-row v-for="item in memberTableData" :key="item.id" style="padding: 3px">
                        <el-col :span="16" style="padding-top: 5px;font-size: 13px">
                        <span style="text-overflow:ellipsis">
                            {{item.conName}}
                        </span>
                        </el-col>
                        <el-col :span="5">
                            <el-button @click="deleteMember(item.conId)" class="el-button el-button--text el-button--medium">删除</el-button>
                        </el-col>
                    </el-row>
                </div>
            </div>
            <div  style="margin-top: 20px;margin-left: 90%">
                <el-button type="primary" size="mini" @click="addPersonalAddressBook">确定</el-button>
            </div>
        </el-dialog>
    </div>
</div>
</body>
<script>
    VueComponent.createPersonalAddressBookManage=function () {
        if(window.personalAddressBookManageVue){
            return;
        }
        window.personalAddressBookManageVue = new Vue({
            el: "#personalAddressBookManage",
            data: {
                conName:'',
                tableTitle: [
                    {label: '联系人', prop: 'name'},
                    {label: '类型', prop: 'typeName'},
                    {label: '分机号', prop: 'extnum'},
                ],
                tableData: [],
                total: 0,
                pageNum: 1,
                pageSize: 10,
                buttons: [{label: "编辑", href: "update"},{label: "删除", href: "delete"}],
                showBox:false,
                title:'',
                form: {
                    id:'',
                    conId:'',
                    conName:'',
                    type:'',
                },
                typeOptions:[{id:0,name:'人员'},{id:1,name:'对讲组'}],
                conOptions:[],
                defaultProps: {
                    label: 'name',
                    isLeaf: 'isLeaf'
                },
                loadTree:true,
                showManageBox:false,
                memberTableData:[],
            },
            mounted: function () {
                this.query();
            },
            methods: {
                handleCheckChange:function(data, checked, indeterminate) {
                    if( checked ){
                        var nodeObj={};
                        nodeObj.conId=data.id;
                        if(data.type===2){
                            nodeObj.type=1;
                        }else {
                            nodeObj.type=0;
                        }
                        if(data.name.length>10){
                            nodeObj.conName=data.name.substring(0,10)+'...';
                        }else{
                            nodeObj.conName=data.name;
                        }
                        var length=false;
                        for(var i=0;i<this.memberTableData.length;i++){
                            if(data.id === this.memberTableData[i].conId){
                                length=true;
                            }
                        }
                        if(!length){
                            this.memberTableData.push(nodeObj);
                        }
                    }else if( !checked ){
                        for(var i=0;i<this.memberTableData.length;i++){
                            if(data.id ===this.memberTableData[i].conId){
                                this.memberTableData.splice(i,1);
                            }
                        }
                    }
                },
                deleteMember:function (id) {
                    for(var i=0;i<this.memberTableData.length;i++){
                        if(id === this.memberTableData[i].conId){
                            this.memberTableData.splice(i,1);
                            var node = this.$refs.tree.getNode(id);
                            node.checked = false;
                        }
                    }
                },
                manageDialogClose(){
                    window.personalAddressBookManageVue.loadTree=false;
                    setTimeout(function () {
                        window.personalAddressBookManageVue.loadTree=true;
                    },100);
                },
                loadFleetAll: function (node, resolve) {
                    var that = this;
                    if (node.data) {
                        that.getChild(node.data.id, node.data.type, resolve);
                    } else {
                        setTimeout(function () {
                            that.getChild(window.fleetId, 0, resolve);
                        }, 0);
                    }
                },
                getChild: function (id, type, resolve) {
                    var jsonData = {
                        parentId: id,
                        type: type
                    };
                    axios.post('/scs/fleetManage/getFleetAndGroupAndSub', jsonData)
                        .then(function (res) {
                            res = res.data;
                            if (res.success) {
                                var childNodes = [];
                                if (res.obj && res.obj.length>0) {
                                    for(var i=0;i<res.obj.length;i++){
                                        if(res.obj[i].type===2 || res.obj[i].type===3){
                                            res.obj[i].isLeaf=true;
                                        }
                                    }
                                    childNodes = res.obj;
                                }else {
                                    var node = window.personalAddressBookManageVue.$refs.tree.getNode(id);
                                    node.loading = false;
                                    return
                                }
                                resolve(childNodes);
                            }
                        })
                        .catch(function (error) {
                            console.log(error);
                        });
                    setTimeout(function () {
                        for(var i=0;i<window.personalAddressBookManageVue.memberTableData.length;i++){
                            var node = window.personalAddressBookManageVue.$refs.tree.getNode(window.personalAddressBookManageVue.memberTableData[i].conId);
                            if(node!=null && node.checked === false){
                                node.checked = true;
                            }
                        }
                    },200);
                },
                filterNode: function (value, data) {
                    if (!value)
                        return true;
                    else
                        return data.name.indexOf(value) !== -1;
                },
                query: function (pageNum) {
                    if(pageNum){
                        this.pageNum=pageNum;
                    }
                    var data = {
                        conName:this.conName||'',
                        userId:DasConstant.userId,
                        pageNum:this.pageNum,
                        pageSize:this.pageSize
                    };
                    axios.post('/scs/personalAddressBookManage/getPersonalAddressBook', data)
                        .then(function (res) {
                            if (res.status === 200) {
                                var data = res.data;
                                if (res.data.success) {
                                    for(var i=0;i<data.obj.list.length;i++){
                                        data.obj.list[i].typeName=(data.obj.list[i].type === 0) ? '人员' : '对讲组';
                                    }
                                    this.tableData=data.obj.list;
                                    this.total = data.obj.total;
                                } else {
                                    this.$message('');
                                }
                            } else {
                                this.$message('');
                            }
                        }.bind(this)).catch(function () {

                    }.bind(this));
                },
                add:function () {
                    var that=this;
                    that.showBox = true;
                    that.title = "添加";
                    that.getMemberTableData();
                },
                addPersonalAddressBook:function(){
                    var that = this;
                    var data = {};
                    data.memberTableData=that.memberTableData;
                    data.userId=DasConstant.userId;
                    axios.post('/scs/personalAddressBookManage/addPersonalAddressBook',data)
                        .then(function (res) {
                            var res = res.data;
                            if(res.success){
                                if(res.obj.count===1){
                                    that.closeBox();
                                    that.$message('操作成功');
                                    that.query();
                                }else{
                                    that.$message('操作失败');
                                }
                            }else{
                                that.$message('操作失败');
                            }
                        })
                        .catch(function (err) {
                            console.log(err);
                        });
                },
                closeBox:function () {
                    this.showBox=false;
                },
                operate:function (row,href) {
                    var that=this;
                    if(href.indexOf('update') !== -1){
                        that.showBox = true;
                        that.title = "编辑";
                        that.getMemberTableData();
                    }else{
                        this.$confirm('是否确定删除', '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning'
                        }).then(() => {
                        axios.post('/scs/personalAddressBookManage/deletePersonalAddressBook',{id:row.id})
                            .then(function (res) {
                                var res = res.data;
                                if(res.success){
                                    that.$message('删除成功');
                                    that.query();
                                }
                            })
                            .catch(function (err) {
                                console.warn(err);
                            });});
                    }
                },
                getMemberTableData: function () {
                    var data = {
                        userId:DasConstant.userId,
                        pageNum:1,
                        pageSize:10000
                    };
                    this.memberTableData=[];
                    axios.post('/scs/personalAddressBookManage/getPersonalAddressBook', data)
                        .then(function (res) {
                            if (res.status === 200) {
                                var data = res.data;
                                if (res.data.success) {
                                    this.memberTableData=data.obj.list;
                                } else {
                                    this.$message('');
                                }
                            } else {
                                this.$message('');
                            }
                        }.bind(this)).catch(function () {

                    }.bind(this));
                },
                changePageNum: function (val) {
                    this.pageNum = val;
                    this.query();
                },
            }
        });
    }
</script>
</html>
